<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{login.title}"></title>
    <script th:inline="javascript">

        $(function () {
            $("#login-sumbit-id").click(function () {

                // 验证表单
                var flag =  $(".form-control").checkDom()
                if(!flag){
                    return
                }

                // 错误次数>=3时验证验证码
                var errorCount = [[${session.loginErrorCount}]] || 0;
                if(errorCount >= 3) {
                    var inputCaptcha = $("#captcha").val();
                    if(!inputCaptcha) {
                        alert("请输入验证码");
                        return;
                    }
                }
                $("#login-form-id").submit();
            });

            // 刷新验证码
            $("#refreshCaptcha").click(function(){
                $("#captchaImg").attr("src", "/disk/login/getCaptcha?" + Math.random());
            });//end login-sumbit-id
        })//end ready 方法

    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;

        }

        body > header {
            display: flex;
            width: 100%;
            justify-content:space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        body > header > img{
            height: 80px
        }

        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }
        body > article{
            flex-grow: 1;
            background-color: #d4efec;
            width: 100%;
            display: flex;
            align-items: center;
        }

        body > article > section{
            flex-grow: 1;
            display: flex;

        }

        body > article > section > img {
            width: 100%;
        }

        body > article > form{
            flex-basis: 300px;
            margin-right: 30px;
        }

        #login-sumbit-id{
            width: 100%;
        }



    </style>
</head>
<body>
<header>
    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav>

        <a  th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>
        <a  th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>
</header>
<article>
    <section>
        <img th:src="@{/assets/images/pic.png}">
    </section>

    <form id="login-form-id" method="post" action="verification">
        <div class="form-group">
            <span th:text="#{login.user.name}"></span>
            <input class="form-control" name="username"
                   th:placeholder="#{login.user.name.plch}"
                   th:title="#{login.user.name.plch}"
                   pattern="^.{4,}$"
            >
        </div>

        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="password" type="password"
                   th:placeholder="#{login.password.plch}"
                   th:title="#{login.password.plch}"
                   pattern="^.{6,}$"
            >

        </div>

        <!--                <button th:text="#{login.submit}"></button>-->
        <a id="login-sumbit-id" class="btn btn-success btn-group-lg" href="#" th:text="#{login.submit}"></a>
        <!-- 新增注册按钮 -->
        <a th:href="@{/login/register}" class="btn btn-primary btn-group-lg register-btn" th:text="#{register.title}" >注册账号</a>

        <!-- 验证码区域：错误次数>=3时显示 -->
        <div class="form-group" th:if="${session.loginErrorCount != null and session.loginErrorCount >= 3}">
            <span>验证码</span>
            <input id="captcha" class="form-control" name="captcha" placeholder="请输入验证码" required>
            <div>
                <!--  验证码图片-->
                <img id="captchaImg" th:src="@{/login/getCaptcha}" style="width:120px; height:40px;">
                <a href="#" id="refreshCaptcha">刷新</a>
            </div>
        </div>

        <!-- 在密码输入框下方添加 -->
        <div class="form-group">
            <a th:href="@{/login/forgotPassword}" class="text-primary" th:text="#{login.forgot.password}"></a>
        </div>
    </form>

</article>

<!--    <div>-->
<!--        <a th:href="@{/login/login(lang=zh)}" th:text="#{login.chinese}"></a>-->

<!--        <a th:href="@{/login/login(lang=en)}" th:text="#{login.english}"></a>-->
<!--        <a id="open-dialog-id">打开</a>-->

<!--    </div>-->
<!--    <form method="post" action="verification">-->
<!--        <div>-->
<!--            <span th:text="#{login.user.name}"></span>-->
<!--            <input name="username">-->
<!--        </div>-->

<!--        <div>-->
<!--            <span th:text="#{login.user.password}"></span>-->
<!--            <input name="password" type="password">-->
<!--        </div>-->

<!--        <button th:text="#{login.submit}"></button>-->
<!--    </form>-->
</body>
</html>